<!--
Copyright (c) 2015 Intel Corporation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html ng-app="satt">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title ng-bind="satTitle">SATT</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- use when running in SATT server <base href="/demo/" /> -->
    <base href="/" />
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- inject:css -->
    <!-- endinject -->

  </head>
    <body ng-style="{'padding-top': paddingTop }">
    <!--[if lt IE 7]>
      <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="lib/es5-shim.js"></script>
      <script src="lib/json3.js"></script>
    <![endif]-->

    <div style="position: fixed; left: 50%; z-index:10000; width: 500px; margin-left:-250px;">
      <div ng-show="flash" class="alert alert-{{flash.type}} alert-dismissable" ng-cloak>
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {{ flash.message }}
      </div>
    </div>

        <div class="navbar navbar-fixed-top" ng-controller="MenuCtrl">
          <div class="navbar-inner">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">
              <img class="logo" src="css/img/logo.png" />
              <span class="link" ng-cloak> SATT {{ traceName }} </span>
            </a>

            <div class="nav-collapse" ng-cloak>
              <ul class="nav" ng-repeat="item in menu">
                  <li ng-mouseleave="hideinfo()" ng-mouseover="showinfo()" ng-class="{active: item.active}">
                    <a href="{{item.href}}">
                      {{ item.name }}
                    </a>
                  </li>
              </ul>
            </div><!--/.nav-collapse -->
            <!-- Trace Info Popup -->
            <div ng-cloak ng-style="infoy" ng-show="infoVisible" class="traceinfo">
              <div><b>Trace {{traceId}}</b> - {{selectTrace.device}} - <b>Contact:</b> {{selectTrace.contact}}</div>
              <div class="span8">
              <table class="table table-striped">
                  <tbody class="table-rows">
                      <tr ng-repeat="row in traceInfo">
                          <td>{{row.key}}</td>
                          <td><div class='text-right'>{{row.value}}</div></td>
                          <td>{{row.info}}</td>
                      </tr>
                  </tbody>
              </table>
              </div>
              <div ng-if="showScreenShot" class="span4">
                  <img ng-src="/api/1/screenshot/{{traceId}}/screen.png" />
              </div>
            </div>
            <!-- Trace Info Popup END -->
            <!-- Upload button -->
            <div class="upload cloak pull-right">
              <div flow-init
                   ng-controller="UploadCtrl"
                   >
                <span ng-hide="loading" class="btn btn-info" flow-btn>Upload File</span>
                <div ng-show="loading" class="progress progress-striped">
                  <div class="bar" ng-style="{'width' : percent }"></div>
                </div>
              </div>
            </div>
            <!-- Bookmarks button -->
            <div class="bookmark" ng-controller="BookmarkCtrl">
              <button ng-disabled="data.addButtonDisabled" ng-click="addBookmark()" class="btn btn-info"><i class="icon-plus icon-white"></i></button>
              <button ng-disabled="data.bookmarkListButtonDisabled" ng-click="showBookmarksButton()" class="btn btn-info"><i class="icon-list icon-white"></i> Bookmarks</button>
              <!-- Bookmark modal -->
              <div id="myModal" ng-show="data.visible" class="modal cloak" tabindex="1" ng-cloak>
                <div class="modal-header">
                  <button type="button" ng-click="data.visible=false" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">{{data.title}}</h3>
                </div>
                <!-- Bookmark List -->
                <div class="modal-body" ng-show="data.bookmarkViewTypeList == 'list'">
                  <div ng-show="data.searching"><img src="css/img/loader.gif" /></div>
                  <ul ng-repeat="row in data.bookmarks">
                    <li>
                      <span><a href="#/trace/{{row.traceid}}/{{row.id}}" ng-click="openBookmark(row.id)">{{row.traceid}} : {{row.title}} - {{row.description}}</a>
                      <a href="#" class="pull-right" ng-click="deleteBookmark(row.id)" title="Delete bookmark" eat-click><i class="icon-trash"></i> </a>
                      <a href="#" class="pull-right" ng-click="editBookmark(row.id)" title="Edit bookmark" eat-click><i class="icon-pencil"></i></a>
                      <span>
                    </li>
                  </ul>
                </div>
                <!-- Add Bookmark -->
                <div class="modal-body" ng-show="data.bookmarkViewTypeList == 'new' || data.bookmarkViewTypeList == 'update'">
                  <div ng-show="data.searching"><img src="css/img/loader.gif" /></div>
                  <form class="form-horizontal">
                    <div class="control-group" ng-class="">
                      <label class="control-label" for="inputTraceId">Trace ID</label>
                      <div class="controls">
                        <input type="text" disabled id="inputTraceId" value="{{ bookmark.traceId }}">
                      </div>
                    </div>
                    <div class="control-group" ng-class="{'error': bookmark.title.length < 5, 'success': bookmark.title.length >= 5}">
                      <label class="control-label" for="inputTitle">Title</label>
                      <div class="controls">
                        <input type="text" id="inputTitle" ng-model="bookmark.title" placeholder="What this bookmark shows?">
                      </div>
                    </div>
                    <div class="control-group success">
                      <label class="control-label" for="inputDesc">Description</label>
                      <div class="controls">
                        <textarea rows="3" id="inputDesc" ng-model="bookmark.description" placeholder="More detailed description..."></textarea>
                      </div>
                    </div>
                  </form>
                </div>
                <!-- Bookmark List Footer -->
                <div class="modal-footer" >
                  <button ng-show="data.bookmarkViewTypeList == 'list'" class="btn btn-info" ng-click="addBookmark()" ng-disabled="data.addButtonDisabled"><i class="icon-plus icon-white"></i> Add Bookmark</button>
                  <button ng-show="data.bookmarkViewTypeList  == 'new'" ng-disabled="bookmark.title.length < 5" class="btn btn-info" ng-disabled="data.addButtonDisabled" ng-click="saveBookmark()"><i class="icon-plus icon-white"></i>Save Bookmark</button>
                  <button ng-show="data.bookmarkViewTypeList == 'update'" ng-disabled="bookmark.title.length < 5" class="btn btn-info" ng-disabled="data.addButtonDisabled" ng-click="editBookmarkUpdate()"><i class="icon-plus icon-white"></i>Update Bookmark</button>
                  <button class="btn" ng-click="data.visible=false">Close</button>
                </div>
                <!-- Bookmark List Footer END -->
              </div>
              <!-- Bookmark modal end -->
            </div>

            <div class="search" ng-controller="SearchCtrl" ng-cloak>
              <form class="form-search code-search" name="function" ng-keydown="searchkey()" ng-submit="search()">
                <div>
                <div class="input-append">
                  <input type="text" class="span3 search-query" ng-model="data.search">
                  <button type="submit" ng-show="!data.searchVisible" class="btn"><i class="icon-search"></i> Search</button>
                  <button type="submit" ng-show="data.searchVisible" class="btn"><i class="icon-search" ></i> Clear</button>
                </div>
              </div>
              </form>
              <div id="myModal" ng-show="data.visible" class="modal cloak" tabindex="1">
                <div class="modal-header">
                  <button type="button" ng-click="data.visible=false" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">Search Results for: {{data.search}}</h3>
                </div>
                <div class="modal-body">
                  <div ng-show="data.searching"><img src="css/img/loader.gif" /></div>
                  <ul ng-repeat="row in data.results">
                    <li><a ng-class="{muted: data.searching}" href="#" ng-click="getSymbol(row.id,$index)" eat-click>{{row.symbol}} ({{row.hits}})</a><img ng-show="globalConfig.fetchingSymbol == $index" src="css/img/small-loader.gif" /></li>
                  </ul>
                </div>
                <div class="modal-footer">
                  <button class="btn" ng-click="data.visible=false">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- navbar end -->
    <!-- Add your site or application content here -->
<div class="container-fluid app-page" ng-view></div>

    <script src="lib/jquery.js"></script>
    <script src="lib/d3.js"></script>
    <script src="lib/lodash.js"></script>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="lib/angular-resource.js"></script>
    <!--<script src="lib/angular-cookies.js"></script>-->
    <!--<script src="lib/angular-sanitize.js"></script>-->
    <script src="lib/ui-bootstrap-tpls.js"></script>
    <script src="lib/flow.js"></script>
    <script src="lib/ng-flow.js"></script>
    <script src="lib/bootstrap-dropdown.js"></script>

    <!-- bower:js -->
    <!-- endinject -->

    <!-- inject:js -->
    <!-- endinject -->

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script type="text/javascript">
        /*
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-36895130-1']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        */
        </script>
  </body>
</html>
